<template>
	<view>
		<scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''">
			<cu-custom bgColor="bg-gradual-pink" :isBack="true">
				<block slot="content">隐患详情</block>
			</cu-custom>



			<view class="detaliy">
				<view class="listdetail">
					<view class="title">检查标准</view>
					<view class="fuhexinxi">{{formData.checkCriteria}}</view>
					<view class="li">
						<view class="listtop margin-bottom">
							<span>隐患描述</span>
							<span>{{formData.createTime}}</span>
						</view>

						<text class="margin-bottom">{{formData.dangerDesc}}</text>
						<view class="middle_img">
							<view class="Colt_center_middleImg" v-for="(items,i) in formData.photoList" :key="i">
								<view class="img_wapBox">
									<image class="imag" :src="items.url" mode="aspectFill"
										@click.stop="photoPreview(formData.photoList,i)"></image>
								</view>
							</view>
						</view>
						<view class="label margin-bottom" v-if="formData.detailDesc == ''">{{formData.detailDesc}}
						</view>
						<view class="listbottom margin-bottom">
							<view class="jibie">整改建议</view>
							<view class="zheng">{{formData.advise}}</view>
						</view>

					</view>
				</view>
				<view class="zhenggaiyinan">
					<view class="title" v-if="formData.levelText != undefined && formData.levelText != ''">隐患级别<span>{{formData.levelText == undefined ? '' : formData.levelText}}隐患</span></view>
					<view class="title">整改期限：{{formData.deadline}}
						<view class="icon">{{formData.status == 0 ? '未整改' : '已整改'}}</view>评分值{{formData.score}}
					</view>
					<view class="title">隐患排查动态<span>({{formDataReal.length}})</span></view>
					<view class="naver">
						<!-- <uni-steps :options="formDataReal" active-color="#007AFF" :active="active" direction="column" /> -->
						<view class="zero">
							<view class="li animation-slide-bottom" :style="[{animationDelay: (index + 1)*0.05 + 's'}]"
								v-for="(item,index) in formDataReal" :key="index" @click="showDrawer(1,item)">
								<view class="c6">
									<view class="icon-huo"></view>
									{{ item.operationType == 'rectify' ? '业主' : item.createBy_dictText }}
									{{item.operationType_dictText}}
								</view>
								<view class="c5">{{item.remark == null ? '' : item.remark}}</view>
								<view class="c4">{{item.createTime}}</view>
							</view>
						</view>
					</view>
				</view>

			</view>

			<!-- 操作日志 -->
			<view>
				<uni-drawer ref="showLeft" :width="320" mode="right" @change="changeDrawer">
					<!-- <button @click="closeDrawer">关闭Drawer</button> -->
					<view class="formbox">
						<view class="h5">{{current == 2 ? '隐患整改情况预审' : current == 3 ? '复查结果' : current == 4 ? '隐患整改情况复审' : '信息'}}</view>
						<uni-forms ref="form" :modelValue="riZhi" v-if='current == 1'>
							<view class="ul">
								<view class="h6">操作人员</view>
								<view class="span">{{riZhi.operationType == 'rectify' ? '业主' : riZhi.createBy_dictText}}</view>
							</view>
							<view class="ul">
								<view class="h6">操作时间</view>
								<view class="span">{{riZhi.createTime}}</view>
							</view>
							<view class="ul">
								<view class="h6">操作类型</view>
								<view class="span">{{riZhi.operationType_dictText}}</view>
							</view>
							<view class="ul">
								<view class="h6">备注信息</view>
								<view class="span">{{riZhi.remark}}</view>
							</view>
							<view class="ul">
								<view class="h6">图片信息</view>
								<view class="middle_img">
									<view class="Colt_center_middleImg" v-for="(items,index) in riZhi.photoList" :key="index">
										<view class="img_wapBox">
											<image class="imag" :src="items.url" mode="aspectFill" @click.stop="photoriZhi(riZhi.photoList,index)"></image>
										</view>
									</view>
								</view>

							</view>
						</uni-forms>

						<uni-forms ref="form" :modelValue="riZhitable" v-if='current == 2 || current == 3 || current == 4'>
							<view class="ul radiobox" v-if='current == 2 || current == 4'>
								<view class="h6">审核结果</view>
								<view class="span">
									<radio-group @change="radioChange" class="radio-group">
										<label class="uni-list-cell uni-list-cell-pd">
											<view class="left">审核通过</view>
											<view class="right">
												<radio value="1" :checked="1 === riZhitable.reviewStatus" />
											</view>

										</label>
										<label class="uni-list-cell uni-list-cell-pd">
											<view class="left">审核不通过</view>
											<view class="right">
												<radio value="0" :checked="0 === riZhitable.reviewStatus" />
											</view>

										</label>
									</radio-group>
								</view>
							</view>
							<view class="ul radiobox" v-if='current == 3'>
								<view class="h6">隐患结果</view>
								<view class="span">
									<radio-group @change="radioChange" class="radio-group">
										<label class="uni-list-cell uni-list-cell-pd">
											<view class="left">隐患已整改</view>
											<view class="right">
												<radio value="1" :checked="1 === riZhitable.review" />
											</view>

										</label>
										<label class="uni-list-cell uni-list-cell-pd">
											<view class="left">隐患未整改</view>
											<view class="right">
												<radio value="0" :checked="0 === riZhitable.review" />
											</view>

										</label>
									</radio-group>
								</view>
							</view>
							<view class="ul" v-if='current == 3'>
								<view class="h6">复查图片</view>
								<view class="span">
									<uni-file-picker v-model="imageValue" fileMediatype="image" mode="grid"
										@select="select" @progress="progress" @delete="deLete" @success="success"
										@fail="fail" />
								</view>
							</view>

							<view class="ul" v-if='current == 2 || current == 3 || current == 4'>
								<view class="h6">备注</view>
								<view class="textarea">
									<textarea v-model="riZhitable.remark" placeholder-style="color:#F76260"
										:placeholder="current == 2 ? '您可输入备注信息' : current == 3 ? '请输入复查情况描述' : ''" />
								</view>

							</view>
						</uni-forms>
					</view>
					<view class="uni-btn-v" v-if='current == 2 || current == 3 || current == 4'>
						<view class="padding flex flex-direction">
							<button class="cu-btn bg-blue lg" @click="formSubmit">提交</button>
						</view>
					</view>

				</uni-drawer>
			</view>
			<!-- 底部 -->
			<view class="fixedbottm">
				<view class="two">
					<view class="text-center">
						<button plain type="warn" v-if="isShowPrevReview && (role == 'check' || role == 'admin' || role == 'checkauditor')" class="cu-btn bg-blue lg margin-right shadow" @tap="deleteDrawer()"><text
								space="emsp">删除</text>
						</button>
						<button plain type="primary" v-if="isShowPrevReview && (role == 'check' || role == 'admin' || role == 'checkauditor')" class="cu-btn bg-blue lg margin-right shadow" @tap="editDrawer()"><text
								space="emsp">修改</text>
						</button>
						<button v-if="isShowPrevReview && (role == 'auditor' || role == 'admin' || role == 'checkauditor')" class="cu-btn bg-blue lg margin-right shadow" @tap="showDrawer(2)"><text
								space="emsp">审核</text>
						</button>
						<button v-if="isShowRecheck && (role == 'check' || role == 'admin' || role == 'checkauditor')" class="cu-btn line-blue lg margin-right shadow" @tap="showDrawer(3)">复查
						</button>
						<button v-if="isShowReview && (role == 'auditor' || role == 'admin' || role == 'checkauditor')" class="cu-btn bg-blue lg margin-right shadow" @tap="showDrawer(4)"><text
								space="emsp">复审</text>
						</button>
						<button v-if="role == 'client' && isShowRectify" class="cu-btn bg-blue lg margin-right shadow" @tap="clientclik()"><text
								space="emsp">整改上传</text>
						</button>
					</view>
				</view>

			</view>
			
			<!-- 完成复查弹框 -->
			<uni-popup ref="bottompopup" type="bottom" :mask-click="true">
				<view class="scortop">
					<view class="title">隐患整改</view>
					<uni-icons type="close" size="30" @click="compclose"></uni-icons>
				</view>
				<view class="scrollbox">
					<view class="titlecontent">
						<view class="ul">
							<view class="h6">隐患描述</view>
							<view class="font">
								{{propsFormlist.dangerDesc}}
							</view>
						</view>
						<view class="ul">
							<view class="h6">整改建议</view>
							<view class="font">
								{{propsFormlist.advise}}
							</view>
						</view>
						<view class="ul">
							<view class="h6">隐患图片</view>
							<view class="middle_img">
								<view class="Colt_center_middleImg" v-for="(items,i) in propsFormlist.photoList"
									:key="i">
									<view class="img_wapBox">
										<image class="imag" :src="items.url" mode="aspectFill"></image>
									</view>
								</view>
							</view>
						</view>
						<view class="ul">
							<view class="h6">整改图片上传</view>
							<uni-file-picker v-model="imageValue" fileMediatype="image" mode="grid" @select="qinselect"
								@progress="progress" @delete="qindeLete" @success="success" @fail="fail" />
						</view>
			
						<view class="ul">
							<view class="h6">备注</view>
							<view class="font">
								<textarea maxlength="140" v-model="propsFormlist.remark"
									placeholder="如有其他补充说明,可在此处填写" />
							</view>
						</view>
			
						<view class="padding flex flex-direction">
							<button class="cu-btn bg-blue lg shadow" @click="photoAdd">提交</button>
						</view>
					</view>
				</view>
			</uni-popup>
			
			<!-- 修改 -->
			<uni-popup ref="editbottompopup" type="bottom" :mask-click="true">
				<view class="scortop">
					<view class="title">修改隐患详情</view>
					<uni-icons type="close" size="30" @click="editcompclose"></uni-icons>
				</view>
				<view class="scrollbox">
					<view class="titlecontent">
						<view class="titlecontent">
							<view class="h6">检查标准 </view>
							<view class="span">{{formData.checkCriteria}} </view>
							<!-- <view class="h6">隐患描述<view class="icon" @click="showDrawer" v-if="showSelectBtn">请选择 </view>
							</view> -->
							<view class="textarea">
								<textarea disabled maxlength="1000" v-model="formData.dangerDesc" placeholder-style="color:#F76260"
									placeholder="请选择隐患描述" />
								<view class="zhuyi">
									隐患描述只可以从隐患库选择，如需新增隐患描述，请联系颜工更新隐患库。如果确实存在需要现场自定义隐患描述，需在隐患库中新增一条"其他隐患"，选中"其他隐患"，就可以编辑隐患描述</view>
							</view>
							<view class="h6">整改建议 </view>
							<view class="textarea">
								<textarea maxlength="1000" v-model="formData.advise" placeholder-style="color:#F76260;height:80px;"
									placeholder="请选择整改建议" />
							</view>
							<view class="h6">详细描述 </view>
							<view class="textarea">
								<textarea style="height: 70px;" v-model="formData.detailDesc"
									placeholder-style="color:#F76260;height:80px;" placeholder="请输入详细描述,可为空" />
						
							</view>
							<view class="h6">上传隐患图片
								<view class="photo">
						
									<uni-file-picker v-model="editimageValue" fileMediatype="image" mode="grid" @select="editselect"
										@progress="progress" @delete="editdeLete" @success="success" @fail="fail" />
								</view>
							</view>
							<view class="padding flex flex-direction">
								<button class="cu-btn bg-red lg"
									@click="editSubmit()">修改</button>
							</view>
						</view>
					</view>
				</view>
			</uni-popup>
			
		</scroll-view>
	</view>

</template>

<script>
	import appSelect from '@/components/my-componets/appSelect.vue'
	import searchinput from '../component/searchinput.vue'
	import server from '@/api/server.js'
	import {
		community
	} from '@/common/util/work.js'
	const plan_type = [{
		text: '日常记录',
		value: '日常记录1'
	}, {
		text: '本周工作',
		value: '本周工作2'
	}, {
		text: '下周计划',
		value: '下周计划3'
	}];

	export default {
		components: {
			searchinput,
		},
		data() {
			return {
				role:'admin',
				riZhitable: {
					remark: '',
					reviewStatus: 1,
					review: 1,
				},
				treatmentStatu: {
					checked: false
				},
				imageValue: [],
				editimageValue:[],
				propsFormlist: [],
				currentrido: 0,
				current: 1,
				items: ['选项卡1', '选项卡2'],
				myFormData: [],
				myFormDataEdit:[],
				community,
				active: 0,
				riZhi: {},
				plan_type,
				modalName: null, 
				formData: [],
				// 表单数据
				formDataReal: [],
				isShowReview:false,
				isShowRectify:false,
				isShowRecheck:false,
				isShowPrevReview:false,
			}
		},
		mounted() {
			this.getdetail()
			console.log(this.role,'111111111')
			this.role = this.$store.getters.role
		},
		methods: {
			photoAdd() {
				let object = {
					checkDangerId: this.$root.$mp.query.id,
					operationType: 'rectify',
					remark: this.propsFormlist.remark,
					photoList: this.myFormData,
				}
				server.flowadd(object).then(res => {
					console.log(res)
					if (res.data.success) {
						this.$tip.success('提交成功！')
						this.$refs.bottompopup.close()
						this.getdetail()
			
					}else{
						this.$tip.success(res.data.message)
					}
				})
			},
			//删除图片
			qindeLete(e) {
				console.log(e)
				if(this.myFormData.length>0){
					var index = -1
					this.myFormData.forEach((item,i)=>{
						if(e.tempFilePath == item.path){
							index=i
						}
					})
					if(index > -1){
						this.myFormData.splice(index,1)
					}
				}
				server.placephotodelete(e.tempFile.name).then(res => {
					this.$nextTick(function() {
						console.log(res)
					});
			
				})
			},
			// 获取上传状态
			qinselect(e) {
				var that = this
				console.log(this.imageValue)
				var tempFilePaths = []
				tempFilePaths = e.tempFilePaths
				tempFilePaths.forEach(function(item) {
					that.$http.upload(that.$config.apiUrl + '/sys/common/upload?biz=place', {
							filePath: item,
							name: 'file'
						})
						.then(res => {
							console.log(that.myFormData)
							let obj = {
								url: res.data.message
							}
							if (res.data.success) {
								that.myFormData.push(obj)
								that.$tip.success('上传成功！')
							} else {
								that.$tip.error('上传失败！')
							}
			
						})
						.catch(err => {
							that.$tip.error(err.data.message)
						});
				})
			
			
			},
			//
			compclose() {
				this.$refs.bottompopup.close()
			},
			deleteDrawer(){
				var obj = {
					id: this.$root.$mp.query.id
				}
				var that = this
				uni.showModal({
					title: '提示',
					content: '确定删除该隐患',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定')
							server.dangerdelete(obj.id).then(res => {
									console.log(res)
									if (res.data.success) {
										that.$tip.success('删除成功!')
										uni.navigateBack({
											delta: 1
										});
									} else {
										that.$tip.error('删除失败!')
									}
							
							
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			editDrawer(){
				this.editimageValue = []
				let dataphot = this.formData.photoList
				dataphot.forEach(item => {
					this.editimageValue.push({
						name: item.id,
						extname: '',
						url: item.url
					})
				
				})
				this.$refs.editbottompopup.open('top')
			},
			editcompclose(){
				this.$refs.editbottompopup.close()
			},
			clientclik(){
				console.log("11111111111111")
				this.propsFormlist = this.formData
				this.$refs.bottompopup.open('top')
			},
			//监听侧边栏关闭
			changeDrawer(){
				this.riZhitable.remark = ''
			},
			//图片预览
			photoPreview(data, index) {
				console.log(data)
				let photoList = data.map(item => {
					return item.url;
				});
				uni.previewImage({
					current: index,
					urls: photoList
				});
			},
			photoriZhi(data, index) {
				console.log(data)
				let photoList = data.map(item => {
					return item.url;
				});
				uni.previewImage({
					current: index,
					urls: photoList
				});
			},
			radioChange: function(evt) {
				console.log(evt)
				this.riZhitable.reviewStatus = evt.detail.value
			},
			//修改隐患详情
			editSubmit(){
					var obj = {
						id: this.$root.$mp.query.id,
						detailDesc: this.formData.detailDesc,
						photoList: this.myFormDataEdit,
						advise:this.formData.advise
					}
					server.dangeredit(obj).then(res => {
							this.$refs.editbottompopup.close()
							console.log(res)
							if (res.data.code == 200) {
								this.getdetail()
								this.myFormDataEdit = []
								this.$tip.success('编辑成功!')
							} else {
								this.$tip.success('编辑失败!')
							}

					
					})
			},
			formSubmit() {
				let obj = {}
				if (this.current == 2) {
					obj = {
						checkDangerId: this.$root.$mp.query.id,
						operationType: 'prevReview',
						remark: this.riZhitable.remark,
						reviewStatus: this.riZhitable.reviewStatus
					}
				} else if (this.current == 3) {
					obj = {
						checkDangerId: this.$root.$mp.query.id,
						operationType: 'recheck',
						remark: this.riZhitable.remark,
						photoList: this.myFormData,
						reviewStatus: this.riZhitable.reviewStatus,
					}
				}else if(this.current == 4) {
					obj = {
						checkDangerId: this.$root.$mp.query.id,
						operationType: 'review',
						remark: this.riZhitable.remark,
						reviewStatus: this.riZhitable.reviewStatus
					}
				}
				this.$refs["showLeft"].close();
				server.flowadd(obj).then(res => {
					this.$nextTick(function() {
						console.log(res)
						if(res.data.success){
							this.$tip.success('提交成功!')
							this.getdetail()
						}

					});

				})
			},
			editdeLete(e){
				console.log(e)
				if(this.editimageValue.length>0){
					var index = -1
					this.editimageValue.forEach((item,i)=>{
						if(e.tempFilePath == item.path){
							index=i
						}
					})
					if(index > -1){
						this.editimageValue.splice(index,1)
					}
				}
				server.dangerphoto(e.tempFile.name).then(res => {
					this.$nextTick(function() {
						console.log(res)
					});
				
				})
			},
			//修改上传图片
			editselect(e) {
				var that = this
				console.log(this.editimageValue)
				console.log('选择文件：', e)
				var tempFilePaths = []
				tempFilePaths = e.tempFilePaths
				tempFilePaths.forEach(function(item) {
					that.$http.upload(that.$config.apiUrl + '/sys/common/upload?biz=place', {
							filePath: item,
							name: 'file'
						})
						.then(res => {
							console.log(res)
							if (res.data.success) {
								that.myFormDataEdit.push({
									path:item,
									url:res.data.message
								})
								that.$tip.success('上传成功！')
							} else {
								that.$tip.error('上传失败！')
							}
						})
						.catch(err => {
							that.$tip.error(err.data.message)
						});
				})


			},
			
			// 获取上传状态
			select(e) {
				var that = this
				console.log(this.imageValue)
				console.log('选择文件：', e)
				var tempFilePaths = []
				tempFilePaths = e.tempFilePaths
				tempFilePaths.forEach(function(item) {
					that.$http.upload(that.$config.apiUrl + '/sys/common/upload?biz=place', {
							filePath: item,
							name: 'file'
						})
						.then(res => {
							console.log(res)
							if (res.data.success) {
								that.myFormData.push({
									path:item,
									url:res.data.message
								})
								that.$tip.success('上传成功！')
							} else {
								that.$tip.error('上传失败！')
							}
						})
						.catch(err => {
							that.$tip.error(err.data.message)
						});
				})


			},
			//删除图片
			deLete(e) {
				console.log(e)
				if(this.myFormData.length>0){
					var index = -1
					this.myFormData.forEach((item,i)=>{
						if(e.tempFilePath == item.path){
							index=i
						}
					})
					if(index > -1){
						this.myFormData.splice(index,1)
					}
				}
				server.deleteBatch(e.tempFile.name).then(res => {
					this.$nextTick(function() {
						console.log(res)
					});

				})
			},
			showDrawer(i, item) {
				this.$refs["showLeft"].open();
				this.current = i
				console.log(this.current)
				this.riZhi = item

			},
			getdetail() {
				server.dangerqueryById({
					id: this.$root.$mp.query.id,
				}).then(res => {
					this.$nextTick(function() {
						console.log(res)
						this.formData = res.data.result
					});

				})
				server.flowlist({
					checkDangerId: this.$root.$mp.query.id,
				}).then(res => {
					this.$nextTick(function() {
						console.log(res)
						this.formDataReal = res.data.result.records
						if(this.formDataReal != null && this.formDataReal.length != 0 ){
							let item = this.formDataReal[this.formDataReal.length-1]
							if(item.operationType == 'add' || item.operationType == 'update'){
								this.isShowPrevReview=true
							}else{
								this.isShowPrevReview=false
							}
							if(item.operationType == 'recheck' && item.reviewStatus == 1){
								this.isShowReview = true
							}else{
								this.isShowReview = false
							}
							if((item.operationType == 'prevReview' && item.reviewStatus == 1)||
							(item.operationType == 'recheck' && item.reviewStatus != 1)||
							item.operationType == 'rectify'){
								this.isShowRectify = true
							}else{
								this.isShowRectify = false
							}
							if((item.operationType == 'prevReview' && item.reviewStatus == 1) || item.operationType == 'rectify' ||
							(item.operationType == 'review' && item.reviewStatus != 1)){
								this.isShowRecheck = true
							}else{
								this.isShowRecheck = false
							}
							console.log(this.isShowReview,'this.isShowReview')
						}
					});

				})
			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.top {
		display: flex;
		justify-content: space-around
	}
	
	.top span:nth-child(1) {
		padding: 0px 4px;
		border: 1px solid white;
		border-radius: 30px;
	}
	
	.meid {
		font-size: 28px;
		font-weight: bold;
		height: 70px;
		display: flex;
		align-items: center;
		justify-content: center;
	
		span {
			border-bottom: 1px solid white;
			padding-bottom: 10px;
		}
	}
	
	.bottom {
		display: flex;
		justify-content: space-around
	}
	
	
	.detaliy {
		.h6 {
			float: left;
			width: 100%;
			background: white;
			padding: 10px 0 10px 10px;
		}
	}
	
	.listdetail {
		float: left;
		width: 100%;
		text{
			color: #969292;
		}
		.title,
		.fuhexinxi {
			padding: 10px 0 10px 10px;
			font-size: 16px;
			background: white;
			border-bottom: 1px solid #ccc;
		}
	
		.fuhexinxi {
			font-size: 14px;
		}
	
		float: left;
	
		.li {
			float: left;
			padding: 5px;
			background: white;
			margin-bottom: 10px;
			margin: 5px;
	
			.listtop {
				width: 100%;
				float: left;
				font-size: 16px;
				span:nth-child(2) {
					float: right;
				}
			}
	
			text {
				font-size: 15px;
			}
	
			uni-image {
				float: left;
				width: 124px;
				height: 80px;
				margin-right: 5px;
			}
	
			image {
				float: left;
				width: 124px;
				height: 80px;
				margin-right: 5px;
			}
	
			.label {
				font-size: 15px;
				color: #999;
			}
	
			.listbottom {
				.zheng {
					font-size: 16px;
					color: #999;
				}
			}
		}
	}
	
	.margin-bottom {
		margin-bottom: 5px;
		float: left;
		width: 100%;
	}
	
	.zhenggaiyinan {
		background: white;
		float: left;
		width: 100%;
	
		.title {
			padding: 10px 0 10px 10px;
			font-size: 16px;
	
			border-bottom: 1px solid #ccc;
	
			span {
				margin-left: 5px;
				color: #999;
				font-size: 14px;
			}
	
			.icon {
				display: inline-block;
				border: 1px solid red;
				padding: 2px 4px;
				font-size: 12px;
				border-radius: 30px;
				color: red;
				margin: 0 10px 0 10px;
			}
		}
	
	}
	
	.zero {
		padding: 5px;
		background: #f1f1f1;
	
		.li {
			line-height: 25px;
			padding: 10px 10px 10px 30px;
			background: white;
			overflow: hidden;
			border-radius: 10px;
			margin-bottom: 5px;
	
			.c6 {
				position: relative;
				font-size: 16px;
				font-weight: bold;
	
				.icon-huo {
					position: absolute;
					font-size: 20px;
					left: -25px;
					top: 0;
	
				}
	
				.icon-huo::after {
					position: absolute;
					content: '';
					width: 1px;
					height: 150px;
					background-color: #e9e9e9;
					left: 9px;
					top: 24px;
				}
			}
		}
	
		.c5 {
			font-size: 14px;
		}
	
		.c4 {
			font-size: 14px;
			color: #999;
		}
	}
	
	
	.formbox {
		padding: 15px;
		float: left;
		width: 100%;
	
		.h5 {
			float: left;
			box-sizing: border-box;
			font-size: 18px;
			margin-bottom: 25px;
			font-weight: bold;
			width: 100%;
		}
	
		.ul {
			margin-bottom: 20px;
			float: left;
			width: 100%;
	
			.h6 {
				float: left;
				width: 100%;
				box-sizing: border-box;
				margin-bottom: 10px;
				font-size: 16px;
				position: relative;
				padding-left: 10px;
			}
	
			.h6:before {
				width: 5px;
				content: '';
				height: 21px;
				background-color: #00a4ff;
				display: inline-block;
				border-radius: 7px;
				position: absolute;
				top: 0;
				left: 0;
			}
		}
	
		.textarea {
			float: left;
			border: 1px solid #ccc;
			padding: 10px;
			width: 100%;
		}
	}
	
	.InstListYb {
		margin-left: -10px;
		margin-right: -10px;
	
		.imglist {
			width: 33.33%;
			float: left;
			padding: 5px;
	
			uni-image {
				height: 100px;
				float: left;
				border-radius: 10px;
			}
		}
	}
	
	.fixedbottm {
		display: flex;
		padding: 10px 0;
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: white;
	
		.two {
			width: 100%;
			float: left;
			color: white;
			display: flex;
			align-items: center;
			justify-content: center;
			justify-content: space-evenly;
	
			span {
				padding: 8px 25px;
				border-radius: 30px;
			}
	
			span:nth-child(1) {
				background: red;
			}
	
			span:nth-child(2) {
				background: blue;
			}
		}
	}
	
	.page,
	scroll-view {
		padding-bottom: 100px;
	}
	
	.radiobox {
		uni-radio-group {
			float: left;
			width: 100%;
		}
	
		uni-label {
			float: left;
			width: 100%;
			margin-bottom: 10px;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	
		.radio-group {
			width: 100%;
	
			.uni-list-cell {
				display: flex;
				justify-content: space-between;
				margin-bottom: 10px;
			}
		}
	
		.left {
			font-size: 16px;
		}
	
		.right {}
	}
	
	/deep/.uni-file-picker {
		float: left;
	}
	
	/deep/.uni-file-picker__container {
		width: 290px;
	}
	//底部弹出框
	/deep/.uni-transition {
		background: white;
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
		overflow: hidden;
	
		.scrollbox {
			height: 500px;
			float: left;
			overflow: auto;
		}
	
		.scortop {
			padding: 10px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 18px;
			font-weight: bold;
			width: 100%;
		}
	}
	
	
	.titlecontent .ul {
		float: left;
		width: 100%;
		margin-bottom: 20px;
	
		textarea {
			float: left;
			width: 100%;
			border: 1px #eee solid;
			padding: 10px;
			border-radius: 10px;
		}
	}
	
	
	
	.titlecontent {
		background: white;
	}
	
	.titlecontent {
		padding: 20px 15px;
	
		.h6 {
			float: left;
			width: 100%;
			box-sizing: border-box;
			margin-bottom: 10px;
			font-size: 18px;
			position: relative;
			padding-left: 10px;
			float: left;
		}
	
		.h6:before {
			width: 5px;
			content: '';
			height: 25px;
			background-color: #007aff;
			display: inline-block;
			border-radius: 7px;
			position: absolute;
			top: 0;
			left: 0;
	
		}
	
		.photo {
			margin-top: 10px;
		}
	
		.span {
			display: inline-block;
			font-size: 16px;
			margin-bottom: 10px;
		}
	
		.icon {
			float: right;
			color: #007aff;
	
		}
	
		.icon.xifen {
			font-size: 14px;
			color: #999;
		}
	
		.textarea {
			float: left;
			width: 100%;
	
			uni-textarea {
				padding: 10px;
				border: 1px solid #8799a3;
				border-radius: 10px;
				width: 100%;
				height: 120px;
				margin-bottom: 10px;
			}
			textarea{
				padding: 10px;
				border: 1px solid #8799a3;
				border-radius: 10px;
				width: 100%;
				height: 120px;
				margin-bottom: 10px;
			}
	
			.zhuyi {
				color: red;
				font-size: 15px;
				margin-bottom: 10px;
			}
		}
	}
	
	.uni-popup {
	    position: fixed;
	    z-index: 9999;
	}
	
</style>
